<template>
    <div id='share-main'>
        <!-- {{this.$route.params.name}} -->
        <div id='share-top'>
            <span>muke micro cloud</span>
        </div>
        <el-card class="box-card" id='main-card'>
            <div slot="header" class="clearfix">
                <div class="block" style="width:70px;">
                    <el-avatar id='shareAvatar' :size="50" :src='this.avatar'></el-avatar>
                </div>
                <div class="block">
                    <span><b>{{this.nickname}}</b></span> 的分享({{this.shareName}})
                </div>
                <div style="clear:both;"></div>
                <span><i>分享日期：</i>{{this.shareTime}} </span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div id='code-info'>
                <div>
                    请输入提取码：
                </div>
                <br>
                <div style="height:100px;">
                    <el-form ref="form" :model="form" label-width="0">
                        <el-form-item prop="code" style="margin-right:100px;float:left;width:250px; ">
                            <el-input type="text" prefix-icon='el-icon-lock' v-model="form.code" placeholder="提取码"></el-input>
                            
                        </el-form-item>
                        <el-form-item style="float:left;width:80px;" >
                            <el-button type="primary" @click="onSubmit" >提取</el-button>                        
                        </el-form-item>
                        
                    </el-form>
                    <span id='tip' style="color:red;">{{this.tip}}</span>
                </div>
            </div>
            
            
        </el-card>


    </div>
</template>

<script>
import util from '../../utils/util';
export default {
    mounted(){
        this.validateShareUrl(this.$route.params.name);
    },
    data() {
        return {
            nickname:'',
            shareTime:'',
            shareName:'',
            avatar: '',
            tip:'',
            form:{code:''}
        };
    },
    methods:{
        // 校验url是否正确
        validateShareUrl(url) {
            this.$axios.post(util.API_HOST + '/user/validate/url',
            {
                url
            })
            .then(reponse => {
                let result = reponse.data;
                if(result.code === 200) {
                    this.avatar = result.data.avatar;
                    this.nickname = result.data.nickname;
                    this.shareTime = result.data.shareTime;
                    this.shareName = result.data.shareName;
                    if (result.data.valid === true) {
                        document.getElementById('code-info').innerHTML = '分享已失效';
                    }
                } else {
                    document.getElementById('main-card').innerHTML = '分享不存在';
                    $('#main-card').css('height',200);
                    $('#main-card').css('font-size',30);
                    $('#main-card').css('text-align','center');
                }
            }).catch(err => {

            });
        },
        onSubmit() {
            if(this.form.code === '' || this.form.code === undefined) {
                this.tip = '提取码不能为空';
                return;
            }
            this.$axios.post(util.API_HOST + '/file/share/extract/file',
            {
                url: this.$route.params.name,
                code: this.form.code
            }).then(response => {
                let result = response.data;
                if(result.code === 200) {
                    // 提取文件，跳转至主页面
                    this.$router.push('/share/main/'+this.$route.params.name);

                } else {
                    this.tip = '提取码错误';
                }

            }).catch(err => {

            })
            

        }
    }
    
}
</script>

<style scoped>
    #share-main {
        background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        width: 100%;
        height: 100vh;
    }
    #share-top {
        font-size: 45px;
        font-weight: 700;
        text-align: center;
    }

    .block {
        float: left;
        margin: auto;
        font-size: 20px;
        line-height: 50px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
        margin: auto;
        margin-top: 50px;
    }

</style>